<!--需要前端做的内容：选择教师 -->
<!doctype html>
<html lang="en" class="fixed">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>排课列表2</title>
    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="stylesheet" type="text/css"
          href="<?php xcho(loadSource('/assets/plugins/bootstrap/css/bootstrap.min.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/animate.css/animate.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/font-awesome/css/font-awesome.css')) ?>">
    <link rel="stylesheet"
          href="<?php xcho(loadSource('/assets/plugins/data-table/media/css/dataTables.bootstrap.min.css')) ?>">
    <!--    <link rel="stylesheet" href="-->
    <?php //xcho(loadSource('/assets/plugins/ztree/css/zTreeStyle/zTreeStyle.css')) ?><!--">-->
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/layui/css/layui.css')) ?>" media="all">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/ztree/css/metroStyle/metroStyle.css')) ?>"
          type="text/css">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/style.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/app.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/css/new_main.css')) ?>">
    <style>
        .pagination {
            margin: 0;
        }

        .sort-content {
            width: 900px;
            margin: 0 auto;
            background: #fff;
        }

        .sort-content .sort-title {
            padding: 20px;
            border-bottom: 1px #ccc solid;
        }

        .sort-content .sort-cont {
            padding: 20px;
        }

        .sort-content .sort-cont .student span {
            margin-left: 100px;
        }

        .sort-content .sort-cont .order {
            margin-top: 10px;
        }

        .sort-content .sort-cont .order ul {
            border-bottom: 1px #eee solid;
        }

        .sort-content .sort-cont .order ul li {
            display: inline-block;
            width: 140px;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
        }

        .sort-content .sort-cont .order ul li.active {
            border-bottom: 2px rgba(16, 142, 233, .9) solid;
            color: #108EE9;
        }

        .sort-content .sort-cont .order .order-content .order-one {
            display: none;
            margin-top: 10px;
        }

        .sort-content .sort-cont .order .order-content .order-one:nth-of-type(1) {
            display: block;
        }

        .sort-content .sort-cont .order .order-content .order-one ol li {
            display: inline-block;
            margin: 0 10px;
        }

        .sort-content .sort-cont .order .order-content .order-one ol li input {
            border-radius: 5px;
            border: none;
            border: 1px #ccc solid;
        }

        .sort-content .sort-cont .order .order-content .order-one ol li select {
            width: 80px;
            height: 24px;
            border-radius: 5px;
            border: none;
            border: 1px #ccc solid;
            font-size: 10px;
        }

        .sort-content .sort-cont .order .order-content .order-one button {
            background: rgba(16, 142, 233, .6);
            border: none;
            padding: 4px 10px;
            color: #fff;
            border-radius: 5px;
            font-size: 12px;
        }

        .sort-content .sort-cont .order .order-content .order-one table {
            width: 100%;
            margin-top: 14px;
        }

        .sort-content .sort-cont .order .order-content .order-one table thead tr {
            background: rgba(16, 142, 233, .7);
        }

        .sort-content .sort-cont .order .order-content .order-one table thead tr th {
            padding: 10px;
            color: #fff;
            text-align: center;
        }

        .sort-content .sort-cont .order .order-content .order-one table tbody tr td {
            padding: 10px;
            text-align: center;
            border: 1px #eee solid;
        }

        .sort-content .sort-cont .order .order-content .order-one table tbody tr td select {
            width: 90px;
            height: 24px;
            border-radius: 5px;
            border: none;
            border: 1px #ccc solid;
            font-size: 10px;
        }

        .sort-content .sort-cont .order .order-content .order-one table tbody tr td span {
            margin: 0 5px;
            color: #777;
            position: relative;
            cursor: pointer;
        }

        .sort-content .sort-cont .order .order-content .order-one table tbody tr td span b {
            width: 40px;
            line-height: 24px;
            background: #fff;
            position: absolute;
            bottom: -28px;
            left: -15px;
            font-weight: normal;
            font-size: 10px;
            color: #000;
            border: 1px #ccc solid;
            border-radius: 5px;
            display: none;
        }

        .sort-content .sort-cont .order-btn {
            height: 40px;
        }

        .sort-content .sort-cont .order-btn .order-btn-cont {
            float: right;
            margin-top: 10px;
        }


    </style>
</head>

<body><?php include_once TPL_PATH . 'public/nav.phtml'; ?>
<div class="wrap">
    <div class="page-body" style="padding: 0">
        <div class="content" style="margin: 0;background: #ececec">
            <div class="sort-content">
                <div class="sort-title">排课<span name="all_data"></span></div>
                <div class="sort-cont">
                    <div class="student">学员：<?php xcho($data['student_name']) ?>
                        <span>课程：<?php xcho($data['course_name']) ?></span></div>
                    <input type="hidden" id="instance_id" name="instance_id" value="<?php xcho($data['instance_id']) ?>">
                    <input type="hidden" id="student_id" name="student_id" value="<?php xcho($data['student_id']) ?>">
                    <input type="hidden" id="course_id" name="course_id" value="<?php xcho($data['course_id']) ?>">
                    <input type="hidden" id="ctype" name="ctype" value="<?php xcho($data['ctype']) ?>">
                    <div class="order">
                        <ul>
                            <?php if (!empty($data['order_data'])) {
                                foreach ($data['order_data'] as $iKey => $aTmp) {
                                    if ($iKey == 0) {
                                        xchoHtml('<li class="active">订单ID:' . $aTmp['order_id'].$aTmp['arrange_status_str'] . '</li>');
                                    } else {
                                        xchoHtml('<li class="">订单ID:' . $aTmp['order_id'].$aTmp['arrange_status_str'] . '</li>');
                                    }
                                }
                            } ?>
                        </ul>
                        <div class="order-content">
                            <?php if (!empty($data['order_data'])) {
                                foreach ($data['order_data'] as $aTmp) {
                                    ?>
                                    <div class="order-one">
                                        <ol>
                                            <li>购买小时：<?php xcho($aTmp['hour']) ?></li>
                                            <input type="hidden"
                                                   name="hours"
                                                   value="<?php xcho($aTmp['hour']) ?>">
                                            <input type="hidden"
                                                   name="order_id"
                                                   value="<?php xcho($aTmp['order_id']) ?>">
                                            <li>已排小时：<?php xcho($aTmp['already_hour']) ?></li>
                                            <li>待排小时：<?php xcho($aTmp['wait_hour']) ?></li>
                                            <input type="hidden"
                                                   name="wait_hours"
                                                   value="<?php xcho($aTmp['wait_hour']) ?>">
                                            <li>开始排课日期：<input type="date"
                                                              name="start_date" value=""></li>
                                            <li>选择教师：<input id="teacher_name" type="text"
                                                            name="teacher_name<?php xcho($aTmp['order_id']) ?>" class="inp_name">
                                                <input type="hidden" id="teacher_id"
                                                       name="teacher_id<?php xcho($aTmp['order_id']) ?>" class="inp_id">
                                                <a class="glyphicon glyphicon-trash del-teacher">
                                                </a></li>
                                            <li>
                                                课程状态
                                                <select name="make_up_status">
                                                    <?php foreach ($make_up_status as $aTmps) { ?>
                                                        <option value="<?php xcho($aTmps['dict_value']) ?>"><?php xcho($aTmps['cn_name']) ?></option>
                                                    <?php } ?>
                                                </select>
                                            </li>
                                        </ol>
                                        <button id="addTime" onclick="addTr('<?php xcho($aTmp['order_id']) ?>')">添加时间段信息</button>
                                        <table class="table_<?php xcho($aTmp['order_id']) ?>">
                                            <thead>
                                            <tr>
                                                <th>时间</th>
                                                <th>时间段</th>
                                                <th>开始时间</th>
                                                <th>结束时间</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <select name="what_day">
                                                        <?php foreach ($what_day as $aTmp) { ?>
                                                            <option value="<?php xcho($aTmp['dict_value']) ?>"><?php xcho($aTmp['cn_name']) ?></option>
                                                        <?php } ?>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="normal_time" id="normal_time">
                                                        <option value="08:00-10:00">08:00-10:00</option>
                                                        <option value="10:20-11:50">10:20-11:50</option>
                                                        <option value="13:00-14:30">13:00-14:30</option>
                                                        <option value="14:50-16:20">14:50-16:20</option>
                                                        <option value="16:40-18:10">16:40-18:10</option>
                                                        <option value="19:00-20:30">19:00-20:30</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="start_hour" id="start_hour">
                                                        <option value="08">08</option>
                                                        <option value="09">09</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                        <option value="13">13</option>
                                                        <option value="14">14</option>
                                                        <option value="15">15</option>
                                                        <option value="16">16</option>
                                                        <option value="17">17</option>
                                                        <option value="18">18</option>
                                                        <option value="19">19</option>
                                                        <option value="20">20</option>
                                                        <option value="21">21</option>
                                                    </select> 时
                                                    <select name="start_minute" id="start_minute">
                                                        <option value="00">00</option><option value="10">10</option><option value="15">15</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="45">45</option><option value="50">50</option>
                                                    </select> 分
                                                </td>
                                                <td>
                                                    <select name="end_hour" id="end_hour">
                                                        <option value="08">08</option>
                                                        <option value="09">09</option>
                                                        <option value="10" selected="selected">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                        <option value="13">13</option>
                                                        <option value="14">14</option>
                                                        <option value="15">15</option>
                                                        <option value="16">16</option>
                                                        <option value="17">17</option>
                                                        <option value="18">18</option>
                                                        <option value="19">19</option>
                                                        <option value="20">20</option>
                                                        <option value="21">21</option>
                                                    </select> 时
                                                    <select name="end_minute" id="end_minute">
                                                        <option value="00">00</option><option value="10">10</option><option value="15">15</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="45">45</option><option value="50">50</option>
                                                    </select> 分
                                                </td>
                                                <td class="paikeDel"><span class="glyphicon glyphicon-trash"><b>删除</b></span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                <?php } ?>
                            <?php } ?>

                        </div>
                    </div>
                    <div class="order-btn">
                        <div class="order-btn-cont">
                            <button id="cancel" class="layui-btn layui-btn-primary">取消</button>
                            <button id="submit" url="<?php xcho($sSaveArrangeUrl)?>" class="layui-btn layui-btn-normal">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<?php xcho(loadSource('/assets/plugins/jquery/jquery.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/layui/layui.all.js')) ?>" charset="utf-8"></script>
<script src="<?php xcho(loadSource('/assets/plugins/bootstrap/js/bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/jquery.dataTables.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/dataTables.bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/layer-v3.0.3/layer/layer.js')) ?>"></script>
<script
        src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/dataTables.responsive.min.js')) ?>"></script>
<script
        src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/responsive.bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/ztree/js/jquery.ztree.core.js')) ?>"></script>
<script type="text/javascript"
        src="<?php xcho(loadSource('/assets/plugins/ztree/js/jquery.ztree.excheck.js')) ?>"></script>
<script type="text/javascript"
        src="<?php xcho(loadSource('/assets/plugins/ztree/js/jquery.ztree.exedit.js')) ?>"></script>
<script>
    $(function () {
        $(".order>ul>li").click(function () {
            var ind = $(this).index();
            $(this).addClass("active").siblings("li").removeClass("active");
            $(".order>.order-content>div").eq(ind).slideDown(200).siblings("div").slideUp(200);
        })
        $("table tr>td>span").hover(function () {
            $(this).find("b").show();
        }, function () {
            $(this).find("b").hide();
        })

    });

    //添加时间段
    function addTr(sStr) {
        var iNum = $(".table_"+sStr+">tbody>tr").length;
        $(".table_"+sStr+">tbody").append('<tr>'
            + '<td>'
            + '<select name="what_day">'
            + '<option value="sunday">星期日</option>'
            + '<option value="monday">星期一</option>'
            + '<option value="tuesday">星期二</option>'
            + '<option value="wednesday">星期三</option>'
            + '<option value="thursday">星期四</option>'
            + '<option value="friday">星期五</option>'
            + '<option value="saturday">星期六</option>'
            + '<option value="day">每天</option>'
            + '</select>'
            + '</td>'
            + '<td>'
            + '<select name="normal_time">'
            +'<option value="08:00-10:00">08:00-10:00</option>'
            +'<option value="10:20-11:50">10:20-11:50</option>'
            +'<option value="13:00-14:30">13:00-14:30</option>'
            +'<option value="14:50-16:20">14:50-16:20</option>'
            +'<option value="16:40-18:10">16:40-18:10</option>'
            +'<option value="19:00-20:30">19:00-20:30</option>'
            + '</select>'
            + '</td>'
            + '<td>'
            + '<select name="start_hour">'
            + '<option value="08">08</option>'
            + '<option value="09">09</option>'
            + '<option value="10">10</option>'
            + '<option value="11">11</option>'
            + '<option value="12">12</option>'
            + '<option value="13">13</option>'
            + '<option value="14">14</option>'
            + '<option value="15">15</option>'
            + '<option value="16">16</option>'
            + '<option value="17">17</option>'
            + '<option value="18">18</option>'
            + '<option value="19">19</option>'
            + '<option value="20">20</option>'
            + '<option value="21">21</option>'
            + '</select> 时'
            + '<select name="start_minute">'
            + '<option value="00">00</option>'
            + '<option value="10">10</option>'
            + '<option value="15">15</option>'
            + '<option value="20">20</option>'
            + '<option value="30">30</option>'
            + '<option value="40">40</option>'
            + '<option value="45">45</option>'
            + '<option value="50">50</option>'
            + '</select> 分'
            + '</td>'
            + '<td>'
            + '<select name="end_hour">'
            + '<option value="08">08</option>'
            + '<option value="09">09</option>'
            + '<option value="10">10</option>'
            + '<option value="11">11</option>'
            + '<option value="12">12</option>'
            + '<option value="13">13</option>'
            + '<option value="14">14</option>'
            + '<option value="15">15</option>'
            + '<option value="16">16</option>'
            + '<option value="17">17</option>'
            + '<option value="18">18</option>'
            + '<option value="19">19</option>'
            + '<option value="20">20</option>'
            + '<option value="21">21</option>'
            + '</select> 时'
            + '<select name="end_minute">'
            + '<option value="00">00</option>'
            + '<option value="10">10</option>'
            + '<option value="15">15</option>'
            + '<option value="20">20</option>'
            + '<option value="30">30</option>'
            + '<option value="40">40</option>'
            + '<option value="45">45</option>'
            + '<option value="50">50</option>'
            + '</select> 分'
            + '</td>'
            + '<td class="paikeDel"><span class="glyphicon glyphicon-trash"><b>删除</b></span></td>'
            + '</tr>');
        //删除时间段
        $("tbody>tr>td.paikeDel").click(function () {
            $(this).parent("tr").remove();
        })

    }
    //选择时间段快捷时间
    $("tbody").on("change","select[name=normal_time]",function () {
        var sTimes = $(this).val();
        $(this).parent().parent().find("td select[name=start_hour]").val(sTimes.substr(0,2));
        $(this).parent().parent().find("td select[name=end_hour]").val(sTimes.substr(6,2));
        $(this).parent().parent().find("td select[name=start_minute]").val(sTimes.substr(3,2));
        $(this).parent().parent().find("td select[name=end_minute]").val(sTimes.substr(9,2));
    })
    $("#submit").on("click",function () {
        $(".hidden_area").remove();
        var data = new Array();
        $.each($(".order-one"),function () {
            if($(this).find(".inp_id").val() == '' || $(this).find("input[name='start_date']").val() == ''){
                return true;
            }
            var aTmp;
            var aArr = new Array();
            $.each($(this).find("table>tbody>tr"),function () {
                var aArrTmp = {
                    what_day:$(this).find("select[name='what_day']").val(),
                    start_hour:$(this).find("select[name='start_hour']").val(),
                    start_minute:$(this).find("select[name='start_minute']").val(),
                    end_hour:$(this).find("select[name='end_hour']").val(),
                    end_minute:$(this).find("select[name='end_minute']").val(),
                }
                aArr.push(aArrTmp);
            })
            aTmp = {
                instance_id:$("#instance_id").val(),
                student_id:$("#student_id").val(),
                course_id:$("#course_id").val(),
                ctype:$("#ctype").val(),
                order_id:$(this).find("input[name='order_id']").val(),
                teacher_id:$(this).find(".inp_id").val(),
                make_up_status:$(this).find("select[name='make_up_status']").val(),
                start_date:$(this).find("input[name='start_date']").val(),
                hours:$(this).find("input[name='wait_hours']").val(),
                data:aArr
            }
            data.push(aTmp);
        })
        $.ajax({
            url: $("#submit").attr('url'),
            data: {
                data:data
            },
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                if(data.success==1){
                    alert('保存成功');
                    window.location.href = "<?php echo($sJumpUrl)?>";
                }else{
                    $.each(data.errors,function (sKey,aVal) {
                        $("[name='"+sKey+"']").after("<span class='hidden_area' style='color: red;padding-top: 5px;'>"+aVal['message']+"</span>");
                    })
                }
            }
        })
    })

    //关闭添加课程
    $("#cancel").on("click",function () {
        window.history.back();
    })
    //选择教师、选择课程
    $(".inp_name").on('focus',function () {
        var sUrl = '<?php xcho($sSearchTeacher) ?>&sPId=teacher_id&sPName=teacher_name';
        var this_name = $(this).attr("name"),
            this_id = $(this).next("input").attr("name");
        var index = layer.open({
            type: 2
            , title: false //不显示标题栏
            , closeBtn: false
            , area: 'auto'
            , shade: 0.8
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['确定', '取消']
            , moveType: 1 //拖拽模式，0或者1
            , content: sUrl
            , success:function (layero, index) {
                //将teacher_id对象与teacher_name对象传递到子页面
                //debugger;
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                // iframeWin.method();
                // console.log(body.html()) //得到iframe页的body内容
                body.find("input").attr("data-special",this_name);
                body.find("input").attr("data-specials",this_id);
                // console.log(body.addParent());
            }
        });
        layer.full(index);
    })

    //删除教师或课程搜索条件
    $(".del-teacher").on('click',function () {
        $(this).parent().find("input[id='teacher_id']").val('');
        $(this).parent().find("input[id='teacher_name']").val('');
    })
</script>

<?php include_once TPL_PATH . 'public/foot_script.phtml'; ?>

<button id="top" style="height: 50px;width: 50px;"></button></body>

</html>
